// index.js
// 获取应用实例
const app = getApp()
const util = require('../../utils/util.js')

Page({

  /**
   * 页面的初始数据
   */
  data: {
    swiperList:[
        {
            "image" : "/images/pic01.png"
        },
        {
            "image" : "/images/pic02.jpg"
        },
        {
            "image" : "/images/pic03.jpg"
        },
        {
            "image" : "/images/pic04.jpg"
        },
        {
            "image" : "/images/pic05.jpg"
        },
        {
            "image" : "/images/pic06.jpg"
        }
    ],
    gridList:[
        {
            "icon" : "/images/icon/working.png",
            "id": 1,
            "name"  : "工作"
        },
        {
            "icon" : "/images/icon/study.png",
            "id": 2,
            "name"  : "学习"
        },
        {
            "icon" : "/images/icon/thinking.png",
            "id": 3,
            "name"  : "思考"
        },
        {
            "icon" : "/images/icon/writing.png",
            "id": 4,
            "name"  : "写作"
        },
        {
            "icon" : "/images/icon/sports.png",
            "id": 5,
            "name"  : "运动"
        },
        {
            "icon" : "/images/icon/reading.png",
            "id": 6,
            "name"  : "阅读"
        }
    ],
    idx : 0,
    workTime: 1,
    // mTime 将 workTime 中分钟换算成毫秒
    mTime: 60000,
    clockShow: false,
    rate:'',
    timeStr:'01:00',
    timer: null,
    // 控制时钟按钮
    okShow:false,
    stopShow:true,
    continueCancleShow:false
  },
    /**
    * 生命周期函数--监听页面加载
    */
  onLoad: function () {
    var res = wx.getSystemInfoSync();
    var rate = 750 / res.windowWidth;
    this.setData({
        rate : rate
    })
  },

  changeWorkTime: function(e){
    // 滑动 slider 组块，改变下方文本数据
      this.setData({
        workTime: e.detail.value
     })
  },
  goChangeCorlor:function(e){
    // currentTarget：绑定的事件的组件，当前的元素及其子元素都会触发
    // target：发生事件的组件，子元素不会被触发事件
    let index = e.currentTarget.dataset.index; 
    // console.log('每个index',index)
    this.setData({
        idx : index
    })
  },
  goTimer:function(){
    this.setData({
      clockShow : true,
      mTime : this.data.workTime*60*1000,
      timeStr: parseInt(this.data.workTime) >= 10 ? this.data.workTime+':00' : '0'
                                                    +this.data.workTime+':00'
    })
    this.drawBg();
    this.drawActive();
  },
  // 画圆
  drawBg:function(){
    var lineWidth = 6 / this.data.rate; // px 尺寸转换
    var ctx =wx.createCanvasContext('progress_bg');
    ctx.setLineWidth(lineWidth);
    ctx.setStrokeStyle('#000000');
    ctx.setLineCap('round');
    ctx.beginPath();
    ctx.arc(400/this.data.rate/2,400/this.data.rate/2,400/this.data.rate/2 - 2* lineWidth,0,2*Math.PI,false);
    // ctx.arc(100,100,80,0,2*Math.PI,false);
    ctx.stroke();
    ctx.draw();
  },

  drawActive:function(){
    var _this = this;
    // 设置定时器
    var timer = setInterval(function(){
        var angle = 1.5 + 2* (_this.data.workTime*60*1000 - _this.data.mTime)/(_this.data.workTime*60*1000);
        var currentTime =  _this.data.mTime - 100
        _this.setData({
            mTime: currentTime
        });
        if(angle < 3.5){
            // 绑定圆环与时间
            if(currentTime % 1000 == 0){
                var timeStr1 = currentTime / 1000;  //秒(s)
                var timeStr2 = parseInt(timeStr1 / 60);     //分(m)
                var timeStr3 = (timeStr1 -timeStr2 *60)>= 10 ? 
                    (timeStr1 -timeStr2 *60) : '0'+(timeStr1 -timeStr2 *60)
                var timeStr2 = timeStr2 >= 10 ? timeStr2:'0'+timeStr2;
                _this.setData({
                    timeStr : timeStr2+':'+timeStr3
                })
            }
            // 白色动态圆环
            var lineWidth = 6 / _this.data.rate; // px
            var ctx = wx.createCanvasContext('progress_active');
            ctx.setLineWidth(lineWidth);
            ctx.setStrokeStyle('#ffffff');
            ctx.setLineCap('round');
            ctx.beginPath();
            ctx.arc(400 / _this.data.rate / 2, 400 / _this.data.rate / 2, 400 / _this.data.rate / 2 - 2 * lineWidth, 1.5 * Math.PI, angle * Math.PI, false);
            ctx.stroke();
            ctx.draw();
    }else{
        _this.setData({
            timeStr:'00:00',
            okShow:true,
            stopShow: false,
            continueCancleShow: false
        })
        clearInterval(timer);
    }
    }, 100);
    _this.setData({
        timer : timer
    })
  },
    // 暂停
    // 1.清除定时器
    // 2.放弃、继续按钮显示
    // 3.暂停按钮隐藏
    // 4.返回按钮隐藏
  stop:function(){
      clearInterval(this.data.timer);
      this.setData({
        //   显示继续和放弃按钮
          stopShow:false,
          continueCancleShow: true,
          okShow:false
      })
  },
    // 继续
    // 1.开始设置定时器
    // 2.放弃、继续按钮隐藏
    // 3.暂停按钮显示
    // 4.返回按钮隐藏
    continue : function(){
      this.drawActive();
      this.setData({
        //   显示暂停按钮
          stopShow:true,
          continueCancleShow: false,
          okShow:false
      })
    },
    // 放弃
    // 1.清除定时器
    // 2.暂停按钮显示
    // 3.返回按钮隐藏
    // 4.切换页面回到计时页
    cancle : function(){
        clearInterval(this.data.timer);
        this.setData({
            stopShow:true,
            continueCancleShow: false,
            okShow:false,
            clockShow:false
        })
    },
    // 返回（倒计时完成时，返回按钮显示，暂停按钮隐藏，继续、放弃按钮隐藏）
    ok : function(){
        clearInterval(this.data.timer);
        this.setData({
            stopShow:true,
            continueCancleShow: false,
            okShow:false,
            clockShow:false
        })
    },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {
    
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {
    
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {
    
  }
})
